<div id="editUserPage" data-role="page" class="page type-interior">

    <div>
        <div class="content-primary">

            <div class="verticalSection">
                <div class="sectionTitleContainer flex align-items-center">
                    <h2 class="sectionTitle username"></h2>
                    <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
                </div>
            </div>

            <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" data-mini="true">
                <a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${Profile}</a>
                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
                <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
            </div>
            <p class="lnkEditUserPreferencesContainer">
                <a class="lnkEditUserPreferences button-link" href="#" is="emby-linkbutton">${ButtonEditOtherUserPreferences}</a>
            </p>
            <form class="editUserProfileForm">

                <div class="disabledUserBanner" style="display: none;">
                    <div class="btn btnDarkAccent btnStatic">
                        <div>
                            ${HeaderThisUserIsCurrentlyDisabled}
                        </div>
                        <div style="margin-top: 5px;">
                            ${MessageReenableUser}
                        </div>
                    </div>

                </div>
                <div id="fldUserName" class="inputContainer">
                    <input is="emby-input" id="txtUserName" required type="text" label="${LabelName}" />
                </div>

                <div class="selectContainer fldSelectLoginProvider hide">
                    <select class="selectLoginProvider" is="emby-select" label="${LabelAuthProvider}"></select>
                    <div class="fieldDescription">${AuthProviderHelp}</div>
                </div>

                <div class="selectContainer fldSelectPasswordResetProvider hide">
                    <select class="selectPasswordResetProvider" is="emby-select" label="${LabelPasswordResetProvider}"></select>
                    <div class="fieldDescription">${PasswordResetProviderHelp}</div>
                </div>

                <div class="checkboxContainer checkboxContainer-withDescription fldRemoteAccess hide">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkRemoteAccess" />
                        <span>${AllowRemoteAccess}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${AllowRemoteAccessHelp}</div>
                </div>
                <label class="checkboxContainer">
                    <input type="checkbox" is="emby-checkbox" id="chkIsAdmin" />
                    <span>${OptionAllowUserToManageServer}</span>
                </label>
                <div id="featureAccessFields" class="verticalSection">
                    <h2 class="paperListLabel">${HeaderFeatureAccess}</h2>
                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableLiveTvAccess" />
                            <span>${OptionAllowBrowsingLiveTv}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkManageLiveTv" />
                            <span>${OptionAllowManageLiveTv}</span>
                        </label>
                    </div>
                </div>
                <div class="verticalSection">
                    <h2 class="paperListLabel">${HeaderPlayback}</h2>
                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableMediaPlayback" />
                            <span>${OptionAllowMediaPlayback}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableAudioPlaybackTranscoding" />
                            <span>${OptionAllowAudioPlaybackTranscoding}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackTranscoding" />
                            <span>${OptionAllowVideoPlaybackTranscoding}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableVideoPlaybackRemuxing" />
                            <span>${OptionAllowVideoPlaybackRemuxing}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkForceRemoteSourceTranscoding" />
                            <span>${OptionForceRemoteSourceTranscoding}</span>
                        </label>
                    </div>
                    <div class="fieldDescription">${OptionAllowMediaPlaybackTranscodingHelp}</div>
                </div>
                <br />
                <div class="verticalSection">
                    <div class="inputContainer">
                        <input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}" />
                        <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
                        <div class="fieldDescription">${LabelUserRemoteClientBitrateLimitHelp}</div>
                    </div>
                </div>
                <div class="verticalSection">
                    <div class="selectContainer fldSelectSyncPlayAccess">
                        <select class="selectSyncPlayAccess" is="emby-select" id="selectSyncPlayAccess" label="${LabelSyncPlayAccess}">
                            <option value="CreateAndJoinGroups">${LabelSyncPlayAccessCreateAndJoinGroups}</option>
                            <option value="JoinGroups">${LabelSyncPlayAccessJoinGroups}</option>
                            <option value="None">${LabelSyncPlayAccessNone}</option>
                        </select>
                        <div class="fieldDescription">${SyncPlayAccessHelp}</div>
                    </div>
                </div>
                <div class="verticalSection">
                    <h2 class="checkboxListLabel" style="margin-bottom:1em;">${HeaderAllowMediaDeletionFrom}</h2>
                    <div class="checkboxList paperList checkboxList-paperList">
                        <label class="checkboxContainer">
                            <input type="checkbox" is="emby-checkbox" id="chkEnableDeleteAllFolders" />
                            <span>${AllLibraries}</span>
                        </label>
                        <div class="deleteAccess">
                        </div>
                    </div>
                </div>
                <div class="verticalSection">
                    <h2 class="checkboxListLabel">${HeaderRemoteControl}</h2>
                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableRemoteControlOtherUsers" />
                            <span>${OptionAllowRemoteControlOthers}</span>
                        </label>

                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkRemoteControlSharedDevices" />
                            <span>${OptionAllowRemoteSharedDevices}</span>
                        </label>
                    </div>
                    <div class="fieldDescription">${OptionAllowRemoteSharedDevicesHelp}</div>
                </div>
                <div class="verticalSection">
                    <h2 class="checkboxListLabel">${HeaderDownloadSync}</h2>
                    <div class="checkboxList paperList" style="padding:.5em 1em;">
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableDownloading" />
                            <span>${OptionAllowContentDownloading}</span>
                        </label>
                        <label>
                            <input type="checkbox" is="emby-checkbox" id="chkEnableSyncTranscoding" />
                            <span>${OptionAllowSyncTranscoding}</span>
                        </label>
                    </div>
                </div>
                <div class="checkboxContainer checkboxContainer-withDescription">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkEnableConversion" />
                        <span>${AllowMediaConversion}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${AllowMediaConversionHelp}</div>
                </div>
                <div class="checkboxContainer checkboxContainer-withDescription">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkEnableSharing" />
                        <span>${OptionAllowLinkSharing}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription sharingHelp"></div>
                </div>
                <div class="checkboxContainer checkboxContainer-withDescription" id="fldIsEnabled">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkDisabled" />
                        <span>${OptionDisableUser}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${OptionDisableUserHelp}</div>
                </div>
                <div class="checkboxContainer checkboxContainer-withDescription" id="fldIsHidden">
                    <label>
                        <input type="checkbox" is="emby-checkbox" id="chkIsHidden" />
                        <span>${OptionHideUser}</span>
                    </label>
                    <div class="fieldDescription checkboxFieldDescription">${OptionHideUserFromLoginHelp}</div>
                </div>
                <br/>
                <div class=verticalSection>
                    <div class="inputContainer" id="fldLoginAttemptsBeforeLockout">
                        <input is="emby-input" type="number" id="txtLoginAttemptsBeforeLockout" min="-1" step="1" label="${LabelUserLoginAttemptsBeforeLockout}"/>
                        <div class="fieldDescription">${OptionLoginAttemptsBeforeLockout}</div>
                        <div class="fieldDescription">${OptionLoginAttemptsBeforeLockoutHelp}</div>
                    </div>
                </div>
                <br />
                <div>
                    <button is="emby-button" type="submit" class="raised button-submit block">
                        <span>${Save}</span>
                    </button>

                    <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
                        <span>${ButtonCancel}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
